<template>
  <div class="buy-container">
    <div class="title">支付管理</div>
    <div class="purse-box">
      <div v-show="purse.payId == null ? true : false">
        <el-button type="text" @click="getrealName()">开通钱包</el-button>
      </div>
      <div
        class="text-blue-500 font-bold text-2xl"
        v-show="purse.payId == null ? false : true"
      >
        <div>我的账户</div>
        <div class="text-right">
          <p
            class="inline text-right cursor-pointer text-gray-400 font-normal"
            @click="canceldialogVisible = true"
          >
            注销钱包
          </p>
        </div>
        <div class="purse-group flex">
          <div class="purse-info flex">
            <div class="pursename font-bold mt-4 text-blue-700">
              {{ purse.payer }}
            </div>
            <div class="balance flex">
              <div class="text-sm text-gray-500">余额：</div>
              <div class="font-bold">￥{{ purse.balance }}</div>
            </div>
            <div class="operation">
              <button class="button" @click="incomedialogVisible = true">
                充值
              </button>
              <button class="button" @click="takeoutdialogVisible = true">
                提现
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="开通钱包"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="sellForm"
        :rules="rules"
        :model="sellform"
        label-width="0px"
      >
        <el-form-item label="" prop="payPassword">
          <span>支付密码</span>
          <el-input v-model="sellform.payPassword" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="openPurse()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="注销钱包"
      :visible.sync="canceldialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="sellForm"
        :rules="rules"
        :model="sellform"
        label-width="0px"
      >
        <el-form-item label="" prop="payPassword">
          <span>支付密码</span>
          <el-input v-model="sellform.payPassword" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="canceldialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cancelPurse()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="充值"
      :visible.sync="incomedialogVisible"
      width="30%"
      :before-close="incomehandleClose"
    >
      <el-form
        ref="incomeForm"
        :rules="rules"
        :model="incomeform"
        label-width="0px"
      >
        <el-form-item label="" prop="balance">
          <span>充值金额</span>
          <el-input
            v-model="incomeform.balance"
            oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="payPassword">
          <span>支付密码</span>
          <el-input v-model="incomeform.payPassword" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="incomedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="incomePurse()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提现"
      :visible.sync="takeoutdialogVisible"
      width="30%"
      :before-close="takeouthandleClose"
    >
      <el-form
        ref="takeoutForm"
        :rules="rules"
        :model="takeoutform"
        label-width="0px"
      >
        <el-form-item label="" prop="takeBalance">
          <span>提现金额</span>
          <el-input
            v-model="takeoutform.takeBalance"
            oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="payPassword">
          <span>支付密码</span>
          <el-input v-model="takeoutform.payPassword" show-password></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="takeoutdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="takeoutPurse()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cookie from '@/utils/cookie';
export default {
  name: "",
  data() {
    var sellPasswordCheck = (rule, value, callback) => {
      if (this.canceldialogVisible == true) {
        if (value === "") {
          console.log("密码为空");
          callback(new Error("密码不能为空"));
        }  else {
          this.$taxios
            .postInfo("/checkoutTPassword", { pwd: value })
            .then((res) => {
              console.log(res);
              if (res.state == 1) {
                if (this.purse.balance != 0) {
                  callback(new Error("还有余额未提现"));
                }else{
                    callback();
                }
              }
              callback("交易密码错误");
            });
        }
      } else {
        if (value === "") {
          console.log("密码为空");
          callback(new Error("密码不能为空"));
        } else {
          this.$taxios
            .postInfo("/checkoutTPassword", { pwd: value })
            .then((res) => {
              console.log(res);
              if (res.state == 1) {
                callback();
              }
              callback("交易密码错误");
            });

          //   callback(new Error("密码不正确"));
        }
      }
    };
    var incomeCheck = (rule, value, callback) => {
      this.getPurse();
      console.log(value);
      if (value === null || value == "") {
        callback(new Error("金额不能为空"));
      } else if (value < 0) {
        callback(new Error("金额不正确"));
      } else if (parseInt(this.purse.balance) + parseInt(value) > 99999) {
        console.log(parseInt(this.purse.balance) + parseInt(value));
        callback(new Error("金额不能大于10w"));
      } else {
        callback();
      }
    };
    var takeOutCheck = (rule, value, callback) => {
      this.getPurse();
      console.log(value);
      if (value === null || value == "") {
        callback(new Error("金额不能为空"));
      } else if (value < 0) {
        callback(new Error("金额不正确"));
      } else if (parseInt(this.purse.balance) - parseInt(value) < 0) {
        console.log(parseInt(this.purse.balance) - parseInt(value));
        callback(new Error("您没有那么多余额"));
      } else {
        callback();
      }
    };
    return {
      //钱包信息
      purse: {
        payId: null,
        payer: null,
        balance: null,
        purseOwner: null,
      },
      //开通账户
      dialogVisible: false,
      sellform: {
        payPassword: "",
      },
      //注销账户
      canceldialogVisible: false,
      //充值账户

      incomeform: {
        balance: null,
        payPassword: "",
      },
      incomedialogVisible: false,

      //账户提现

      takeoutform: {
        takeBalance: null,
        payPassword: "",
      },
      takeoutdialogVisible: false,

      rules: {
        payPassword: [
          { validator: sellPasswordCheck, required: true, trigger: "blur" },
        ],
        balance: [{ validator: incomeCheck, required: true, trigger: "blur" }],
        takeBalance: [
          { validator: takeOutCheck, required: true, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    getPurse() {
      this.$taxios.postInfo("/getPurse").then((res) => {
        console.log(res);
        let state = res.state;
        if (state == 1) {
          this.purse = res.purse;
        }
        console.log(this.purse);
      });
    },
    // 表单验证,创建钱包
    openPurse(value) {
      console.log(this.$refs["sellForm"].validate);
      console.log(this.sellform.sellPrice);
      this.$refs["sellForm"].validate((valid) => {
        if (valid) {
          this.$taxios
            .updateItemInfo("/createPurse",)
            .then((res) => {
              console.log(res);
              this.dialogVisible = false;
              location.reload();
            });
        } else {
          console.log(valid);
          console.log("error.submit!!");
          return false;
        }
      });
    },
    //交易密码校验
    async checkoutTPassword(pwd) {
      await this.$taxios
        .postInfo("/checkoutTPassword", { pwd: pwd })
        .then((res) => {
          console.log(res);
          if (res.state == 1) {
            return true;
          }

          return false;
        });
    },
    //实名认证提示
    open4() {
      this.$message.promptBox("还未实名认证","error")
    },

    //是否实名认证
    getrealName() {

      let token  = this.$cookies.get("token")
      this.$taxios
        .postInfo("/getUserInfo", { token: token })
        .then((res) => {
          console.log(res);
          if (res.userInfo.realName == undefined || res.realName == "") {
            console.log("用户未实名");
            this.open4();
          } else {
            this.dialogVisible = true;
          }
        });
    },
    //开通钱包确认
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$refs["sellForm"].resetFields();
          done();
        })
        .catch((_) => {});
    },
    //充值
    inCome(value, pwd) {
      console.log(value);
      this.getPurse();
      this.purse.balance = value;
      console.log(this.purse.balance);
      this.$taxios.postInfo("/updateBalance", this.purse).then((res) => {
        console.log(res);
        location.reload();
        this.$message.promptBox("交易成功", "success");
      });
    },
    // 充值表单验证
    incomePurse(value) {
      console.log(this.$refs["incomeForm"].validate);
      console.log(this.sellform.sellPrice);
      this.$refs["incomeForm"].validate((valid) => {
        if (valid) {
          console.log("test" + this.incomeform.balance);
          let balance =
            parseInt(this.purse.balance) + parseInt(this.incomeform.balance);

          this.inCome(balance, this.incomeform.payPassword);
        } else {
          console.log(valid);
          console.log("error.submit!!");
          return false;
        }
      });
    },
    //充值确认
    incomehandleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$refs["incomeForm"].resetFields();
          done();
        })
        .catch((_) => {});
    },
    //提现
    takeout(value) {
      console.log(value);
      this.getPurse();
      this.purse.balance = value;
      console.log(this.purse.balance);
      this.$taxios.postInfo("/updateBalance", this.purse).then((res) => {
        console.log(res);
        location.reload();
      });
    },
    // 提现表单验证
    takeoutPurse(value) {
      console.log(this.$refs["takeoutForm"].validate);
      this.$refs["takeoutForm"].validate((valid) => {
        if (valid) {
          console.log("test" + this.takeoutform.takeBalance);
          let balance =
            parseInt(this.purse.balance) -
            parseInt(this.takeoutform.takeBalance);
          this.inCome(balance);
        } else {
          console.log(valid);
          console.log("error.submit!!");
          return false;
        }
      });
    },
    //提现确认
    takeouthandleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.$refs["takeoutForm"].resetFields();
          done();
        })
        .catch((_) => {});
    },
    //注销钱包
    cancelPurse(value) {
      console.log(this.$refs["sellForm"].validate);
      console.log(this.sellform.sellPrice);
      this.$refs["sellForm"].validate((valid) => {
        if (valid) {
          this.$taxios
            .updateItemInfo("/deletePurse", this.purse)
            .then((res) => {
              console.log(res);
              this.dialogVisible = false;
              location.reload();
            });
        } else {
          console.log(valid);
          console.log("error.submit!!");
          return false;
        }
      });
    },
  },
  computed: {},
  created() {
    this.getPurse();
  },
};
</script>
<style  lang="less" scoped>
.buy-container {
  width: 100%;
  max-width: 1200px;
  padding-left: 30px;

  .title {
    height: 60px;
    background: #fff;
    line-height: 60px;
    text-align: left;
    padding-left: 20px;
    box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);
    @apply rounded-lg;
  }

  .purse-box {
    background: #fff;
    margin-top: 1rem;
    @apply rounded-lg;
    padding: 1rem;
    box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);

    .purse-group {
      .purse-info {
        background: #fff;
        margin-top: 1rem;
        @apply rounded-lg;
        padding: 1rem;
        box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);

        flex-direction: column;
        align-items: center;
        // justify-content: center;

        width: 33%;
        max-width: 300px;
        min-width: 150px;

        .pursename {
        }

        .balance {
          margin: 1rem 0;

          width: 100%;
          text-align: left;
          align-items: center;
          justify-content: space-around;
        }

        .operation {
          margin-top: 1rem;

          width: 50%;
          justify-content: space-around;

          button {
            display: block;
            width: 100%;
            padding: 0.2rem 0.5rem;
            margin: 0.5rem 0;
            border: 1px solid #2469e5;
            columns: #2469e5;
            @apply text-sm;
            @apply rounded-2xl;
          }
        }
      }
    }
  }

  .el-dialog__wrapper {
    /deep/ .el-dialog {
      width: 400px;

      .el-form-item {
        text-align: left;

        span {
          // text-align: left;
        }
      }

      .el-input__icon {
        width: auto;
      }

      .el-dialog__footer {
      }
    }
  }

  .dialog-footer {
    .el-button {
      color: black;
    }

    .el-button:hover {
      background: #409eff;
    }
  }
}
</style>
